<template>
  <div class="reserve_open_account_page">
    <van-form @submit="onSubmit">
      <van-field
        v-model="phoneNo"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="validateCode"
        name="短信验证码"
        label="短信验证码"
        placeholder="短信验证码"
        :rules="[{ required: true, message: '请填写短信验证码' }]"
      >
        <template #button>
          <van-button size="small" type="primary"
                      :disabled="isSend"
                      :loading="isSend"
                      loading-text="已发送"
                      @click="sendMsg">发送验证码</van-button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      phoneNo: '',
      validateCode: '',
      isSend: false
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
      this.$router.push('/fillAccountInfo');
    },
    sendMsg() {
      this.isSend = true;
      setTimeout(() => {
        this.isSend = false;
      }, 2000);
    }
  }
};
</script>
<style lang="less">
.reserve_open_account_page{
  height: 100%;
}
</style>
